<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-model-item label="资产编码" prop="assetCoding">
              <j-input v-model="queryParam.assetCoding" type="like"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="资产名称" prop="assetName">
              <j-input v-model="queryParam.assetName" type="like"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="所属人" prop="owner">
              <j-input v-model="queryParam.owner" type="like"/>
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="所属部门" prop="dept">
              <j-input v-model="queryParam.deptName" type="like"/>
              <!-- <j-search-select-tag placeholder="请输入" v-model="queryParam.dept" :dictOptions="searchOptions" mode="multiple">
              </j-search-select-tag> -->
            </a-form-model-item>
          </a-col>
          <a-col :md="8" :sm="8">
            <a-form-model-item label="所属公司" prop="company">
              <!-- <j-input v-model="queryParam.company" type="like"/> -->
              <!-- <j-dict-select-tag
                placeholder="所属公司"
                dictCode="company_code"
                v-model="queryParam.company"
              /> -->

              <j-dict-select-tag
                style="z-index: 33;"
                v-model="queryParam.company"
                dictCode="company_code"
                placeholder="请选择所属公司">
              </j-dict-select-tag>
              
            </a-form-model-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :md="8" :sm="8">
              <a-form-item label="入库时间">
                <a-range-picker format="YYYY-MM-DD"
                                :placeholder="['开始时间', '结束时间']"
                                @change="onTimeChange"/>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="类别" prop="category">
                <j-input v-model="queryParam.category" type="like"/>
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="8">
              <a-form-model-item label="使用人" prop="userer">
                <j-input v-model="queryParam.userer" type="like"/>
              </a-form-model-item>
            </a-col>
          </template>
          
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-button type="link" icon="download" @click="openBI">预览导出</a-button>
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
              </a>
            </a-col>
          </span>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 modalForm-->
    <div class="table-operator">
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;" v-if="selectedRowKeys.length>0">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项&nbsp;&nbsp;
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <a style="margin-left: 24px" 
          @click="handleSSR"
          type="primary"
          icon="delete">批量更改【所属人】
        </a>
        <a style="margin-left: 24px" 
          @click="handleSYR"
          type="primary"
          icon="delete">批量更改【使用人】
        </a>
      </div>

      <a-table 
        ref="table" 
        size="middle" 
        :scroll="{ x: true }"
        bordered 
        rowKey="id" 
        :columns="columns"
        :dataSource="dataSource" 
        :pagination="ipagination" 
        :loading="loading" 
        class="j-table-force-nowrap"
        :rowSelection = "searchVisible ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange } : undefined"

        @change="handleTableChange">
        <!-- <span slot="action" slot-scope="text, record">
          <a @click="handleDetailPD(record)">查看二维码</a>
        </span> -->
        <span slot="userer" slot-scope="text, record">
          <a @click="handleEditUser(record)">{{record.userer}}</a>
        </span>
        <span style="white-space: pre-line" slot="spec" slot-scope="text">
          {{text}}
        </span>
        <span slot="planUserYear" slot-scope="text,record">
          <span v-if="record.planUserYear !=' '"> {{text}}年</span>
          <span v-if="record.planUserMonth !=' '">{{ record.planUserMonth }}月</span>
        </span>
      </a-table>
    </div>

    <!-- <AssetQuery-modal ref="modalForm"></AssetQuery-modal> -->
    <AssetUser-modal ref="modalForm" @ok="modalFormOk"></AssetUser-modal>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import AssetQueryModal from './modules/AssetQueryModal'
import AssetUserModal from './modules/AssetUserModal'
import JInput from '@comp/jeecg/JInput'

export default {
  name: 'AssetQueryList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {
    AssetQueryModal,
    AssetUserModal,
    JInput
  },
  data() {
    return {
      description: '固定资产查询',
      searchOptions:[{
          text:"全部",
          value:"1"
        },{
          text:"在职",
          value:"2"
        },{
          text:"离职",
          value:"3"
      }],
      // 表头
      columns: [
        {
          title: '资产编码',
          align: "center",
          dataIndex: 'assetCoding'
        },
        {
          title: '资产名称',
          align: "center",
          dataIndex: 'assetName'
        },
        {
          title: '规格型号',
          align: "center",
          dataIndex: 'spec',
          width: '300px',
          scopedSlots: {
              customRender: 'spec'
          }
        },
        {
          title: '类别',
          align: "center",
          dataIndex: 'category'
        },
        {
          title: '所属公司',
          align: "center",
          dataIndex: 'company'
        },
        {
          title: '所属部门',
          align: "center",
          dataIndex: 'deptName'
        },
        {
          title: '所属人',
          align: "center",
          dataIndex: 'owner'
        },
        {
          title: '使用人',
          align: "center",
          dataIndex: 'userer',
          scopedSlots: { customRender: 'userer' }
        },
        {
          title: '日期',
          align: "center",
          dataIndex: 'useTime'
        },
        {
          title: '使用年限',
          align: "center",
          dataIndex: 'planUserYear',
          scopedSlots: {
              customRender: 'planUserYear'
          }
        },
        {
          title: '原值',
          align: "center",
          dataIndex: 'original'
        },
        {
          title: '净值',
          align: "center",
          dataIndex: 'netWorth'
        },
        {
          title: '状态',
          align: "center",
          dataIndex: 'status'
        },
        {
          title: '所在地点',
          align: "center",
          dataIndex: 'assetsLocation'
        },
      ],
      url: {
        list: "/assets/assetsItem/list",
        delete: "/sys/user/delete",
      },
    }
  },
  created() {
  },
  computed: {
    searchVisible(){
      return (
      ('owner' in this.queryParam || 'userer' in this.queryParam) &&
      (this.queryParam.owner !== '**' && this.queryParam.userer !== '**')
    );
    }
  },
  methods: {
    handleSSR:function(){
      console.log('333')
      console.log(this.selectedRowKeys)
      this.$refs.modalForm.edit({},this.selectedRowKeys,'SSR');
      this.$refs.modalForm.title = "批量-变更所属人";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleSYR:function(){
      var ids = "";
        for (var a = 0; a < this.selectedRowKeys.length; a++) {
          ids += this.selectedRowKeys[a] + ",";
        }
      console.log('ids',ids)
      
      console.log(this.selectedRowKeys)
      console.log(this.selectionRows)

      const params = {
        userer:this.selectName?this.selectName:this.model.assetsUserName,
        departmentId:this.model.dept,
        id:this.model.id,
        updateType:1,
        owner:this.model.owner,
        assetCoding:this.model.assetCoding,
        company:this.model.company

      }
      
      this.$refs.modalForm.edit({},this.selectedRowKeys,'SYR');
      this.$refs.modalForm.title = "批量-变更使用人";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleEditUser:function(record){
      this.$refs.modalForm.edit(record);
      this.$refs.modalForm.title = "变更使用人";
      this.$refs.modalForm.disableSubmit = false;
    },
    handleDetailPD:function(record){
      this.$refs.modalForm.edit(record);
    },
    onTimeChange: function(value, dateString) {
        this.queryParam.startTime = dateString[0]
        this.queryParam.endTime = dateString[1]
    },
    openBI(){
      window.open('https://bi.flyco.net.cn/webroot/decision/view/report?viewlet=flyco%252Fmarkefront%252Fassets_fill.cpt&ref_t=design&ref_c=f85a374f-14ed-487d-86c2-4e405f08fb8')
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

form .ant-select, form .ant-cascader-picker{
  z-index: 9999;
}
</style>